<include file="public@head_mobile" />

    <style>
        .main{
            width: 100vw;
            overflow: hidden;
            background-color: #F5F5F5;
        }
        .banner_box .swiper-horizontal > .swiper-pagination-bullets,
        .swiper-pagination-bullets.swiper-pagination-horizontal,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: -5px;
        }
        .banner_box {
            width: 100%;
            overflow: hidden;
        }
        .banner_box .swiper-pagination-bullet.swiper-pagination-bullet-active{
            background-color: #fff;
            border-color: #fff;
            width: 16px;
            height: 6px;
            opacity: 1;
        }
        .banner_box .swiper-pagination-bullet {
            margin: 0 3px !important;
            width: 6px;
            height: 6px;
            opacity: 0.5;
            border: none;
            background-color: #fff;
            border-radius: 4px;
        }
        .banner_box .swiper-pagination-bullet::before{
            background: none;
        }
        .banner_box .banner_img {
            width: 100%;
        }

        form.example {
            width: 80%;
            margin: 0 auto;
            margin-top: -5rem;
            background: #fff;
            border-radius: 50px;
            z-index: 9;
        }
        form.example input[type="text"] {
            padding: 4px 10px;
            font-size: 16px;
            float: left;
            width: 80%;
            border: 0px;
            background: #fff;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }
        form.example button {
            float: left;
            width: 20%;
            padding: 2px 10px;
            background: linear-gradient(to right, #0351e6, #33cdc7);
            color: white;
            font-size: 16px;
            border-radius: 30px;
            border: 0px;
            border-left: none;
            cursor: pointer;
            position: relative;
            top: 3px;
            left: 12px;
        }
        .banner-bg {
            padding-bottom: 0;
        }

        .cont_title {
            width: 100%;
            border-left:2px solid #00989B;
            display: flex;
            align-items: center;
            margin: 20px auto;
        }
        .cont_title h2 {
            font-size: 18px;
            line-height: 22px;
            padding: 0 10px;
            color: #070707;
            margin: 0;
        }

        .justify-content-center{

        }
        .list_item{
            width: 50%;
            padding:0 5px;
        }

        .services-item {
            padding: 0;
            margin-bottom: 15px;
            border-radius: 10px;
            overflow: hidden;
        }
        .services-item:hover {
            box-shadow: 0px 15px 30px rgba(61, 90, 125, 0.5);
        }
        .services-item .services-icon {
            width: 100%;
            height: 7rem;
            margin-bottom: 15px;
        }
        .services-item .services-icon img {
            max-width: 100%;
            width: 100%;
            height: 100%;
            transform: translate(0, 0);
        }
        .services-content .title {
            width: 100%;
            font-size: 20px;
            margin-bottom: 8px;
            text-align: left;
            padding: 0 10px;
        }
        .services-content .title a{
            width: 100%;
            font-size: 20px;
            display: flow;
            text-align: left;
            white-space: nowrap; /* 确保文本在一行内显示 */
            overflow: hidden; /* 隐藏超出容器的文本 */
            text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
        }
        .services-content p {
            margin-bottom: 0;
            color: var(--tg-granite-gray);
            opacity: 0.7;
            padding: 0 15px;
            text-align: left;
            white-space: nowrap; /* 确保文本在一行内显示 */
            overflow: hidden; /* 隐藏超出容器的文本 */
            text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
        }

        .services-area .row [class*="col-"]:nth-child(even) .services-item {
            margin-top: 0px;
        }

        .services-area .row [class*="col-"]:nth-child(4) .services-icon img {
            transform: translate(0, 0);
        }
        .services-area .row [class*="col-"]:nth-child(2) .services-icon img {
            transform: translate(0, 0);
        }
        .services-area .row [class*="col-"]:nth-child(3) .services-icon img {
            transform: translate(0, 0);
        }

        .services-area{
            padding-bottom: 20px;
        }

        .tag_box {
            width: 100%;
            padding: 6px 10px;
            display: flex;
            overflow: hidden;
        }
        .tag_box span {
            display: block;
            padding: 5px 10px;
            background-color: #edf8f8;
            color: #0b9c9f;
            font-size: 12px;
            margin-right: 6px;
            border-radius: 40px;
            flex-shrink: 0;
        }

        .teacher {
            margin-top: -20px;
        }

        .team-area{
            padding:0;
        }

        .swiper {
            width: 100%;
            height: auto;
        }

        .swiper .services-item .services-icon {
            width: 100%;
            height: 10rem;
            margin-bottom: 15px;
        }


        .swiper .list {
            width: 200px;
            flex-shrink: 0;
        }

        .teacher .swiper-wrapper{
            width: 100%;
            overflow: hidden;
            overflow-x: auto;
            margin-left: 10px;
        }
        .teacher .justify-content-center{
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
            width: 200%;
        }

        .swiper .services-content p {
            padding-bottom: 10px;
        }

        .swiper-button-next,
        .swiper-rtl .swiper-button-prev {
            right: 10px;
            left: auto;
        }
        .swiper-button-next,
        .swiper-rtl .swiper-button-prev img {
            width: 80px;
        }
        .swiper-button-next:after,
        .swiper-button-prev:after {
            display: none;
        }
        .swiper-button-prev,
        .swiper-rtl .swiper-button-next img {
            width: 80px;
        }

        .consult {
            padding-bottom: 80px;
            padding-top: 10px;
        }

        .mt-tabpage-title {
            height: 44px;
            font-size: 0;
            width: 94%;
            margin: auto;
            margin-bottom: 10px;
        }
        .mt-tabpage-title .mt-tabpage-item {
            display: inline-block;
            width: 105px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            color: #666;
            font-size: 18px;
            padding: 5px;
            margin-right: 20px;
        }
        .mt-tabpage-title .mt-tabpage-item:hover {
            color: #333333;
        }
        .mt-tabpage-title .mt-tabpage-item-cur {
            color: #333333;
            font-size: 18px;
            border-bottom: 2px solid #01989b;
        }
        .mt-tabpage-count {
            position: relative;
            width: 800px;
            height: 200px;
            overflow: hidden;
        }
        .mt-tabpage-cont__wrap {
            position: absolute;
        }
        .mt-tabpage-count .mt-tabpage-item {
            width: 800px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .new_box {
            width: 100%;
            background-color: #fff;
            border-radius: 8px;
            padding: 8px;
        }

        .new_box img {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
        }

        .new_box h3 {
            font-size: 20px;
            line-height: 30px;
            padding: 0;
            margin: 0;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .new_box .tag {
            display: block;
            padding: 2px 15px;
            background-color: #f1f6fe;
            color: #5e9cff;
            font-size: 16px;
            margin-right: 6px;
            border-radius: 40px;
            float: right;
            margin-top: -40px;
        }
        .right_cont {
            border-radius: 8px;
        }

        .new_box .time img{
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }
        .new_box .time{
            margin-top: 5px;
        }

        .new_list {
            width: 100%;
            padding: 8px;
            display: flex;
            margin-top: 15px;
            border-radius: 8px;
            background-color: #fff;
        }

        .new_list img {
            width: 250px;
            border-radius: 8px;
            overflow: hidden;
        }
        .right_box {
            margin-left: 15px;
        }
        .new_list .title {
            display: flex;
        }

        .new_list h3 {
            font-size: 18px;
            line-height: 30px;
            padding: 0;
            margin: 0;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .new_list p{
            font-size: 14px;
            line-height: 30px;
            padding: 0;
            margin: 0;
            color: #777777;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 10px;
        }

        .new_list .tag {
            display: block;
            width: 80px;
            padding: 0px 15px;
            line-height: 26px;
            height: 26px;
            background-color: #f1f6fe;
            color: #5e9cff;
            font-size: 14px;
            margin-right: 6px;
            border-radius: 40px;
            margin-top: -5px;
            text-align: center;
            margin-left:0;
        }
        .new_list .time{
            margin-top: 5px;
            font-size: 13px;
        }
        .new_list .time img{
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }

        .last_new {
            border: none;
        }

        .fixe_box {
        }
        .fixe_box .fixe_cont{
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }



        .fixe_box .list_box {
            width: 100%;
            display: flex;
            border-bottom: 1px solid #E6E6E6;
            text-align: right;
            justify-content: flex-end;
            padding-right: 15px;
        }

        .fixe_box .list_box img {
            width: 20px;
            margin: 10px;
        }

        .fixe_box .list_box span a{
            font-size: 14px;
            color: #333333;
            line-height: 40px;
            margin-left: 10px;
            text-align: right;
        }
        .fixe_box .last_box {
            margin-bottom: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom: 1px solid #e6e6e6;
            text-align: right;
        }
        .fixe_box .info {
            width: 100%;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            text-align: right;
            padding-right: 15px;
        }
        .fixe_box .info p {
            font-size: 14px;
            color: #333333;
            line-height: 40px;
            text-align: right;
            margin-bottom: 0px;
        }

        .footer_box{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100vw;
            height: 50px;
            display: flex;
            justify-content: space-between;
            z-index: 99;
            background-color: #fff;
            box-shadow: 0px -5px 5px rgba(0,0,0,0.1);
        }
        .footer_box .foot_item{
            width: 33%;
            margin-top: 5px;
        }
        .footer_box .foot_item img{
            width: 20px;
            display: block;
            margin:0 auto;
        }
        .footer_box .foot_item h3{
            font-size: 14px;
            margin:0;
            padding:0;
            line-height: 22px;
            color: #555555;
            text-align: center;
            font-weight: 500;
        }
        .footer_box .active h3{
            color: #00989B;
        }

        @media (max-width: 991.98px) {
            .sticky-menu.menu-area {
                padding: 10px 0;
            }
            .banner-bg {
                padding: 60px 0 0px;
            }
        }
        .scroll-top.open {
            bottom: 70px;
        }
    </style>
</head>
<body>
<!--loading-->
<div id="preloader" style="display: none">
    <div id="loader" class="loader">
        <div class="loader-container">
            <div class="loader-icon">
                <img src="__TMPL__/public/static/picture/preloader.png" alt="Preloader" />
            </div>
        </div>
    </div>
</div>
<!--loading -->
<include file="public@nav_mobile" />

<!-- 主体内容 -->
<main class="main">
    <!-- banner -->
    <section class="banner-area banner-bg">
        <div class="banner_box">
            <div class="swiper-wrapper">
                <foreach name="slide_list" item="vo">
                    <div class="swiper-slide">
                        <img
                                class="banner_img"
                                src="{:cmf_get_image_url($vo.image)}"
                                alt=""
                        />
                    </div>
                </foreach>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="container" style="display: none">
            <div class="row align-items-center">
                <form class="example" action="/">
                    <input type="text" placeholder="{:lang('Please enter search content')}"  name="search" value="{$search|default=''}" />
                    <button type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>
        </div>
    </section>
    <!-- banner -->

    <!-- 推荐平台 -->
    <section class="services-area">
        <div class="container">
            <div class="cont_title">
                <h2>{:lang('RECOMMEND')}</h2>
            </div>
            <div class="row">

                <foreach name="category1" item="vo">

                <div class="list_item"><a href="portal/article/info.html?id={$vo.id}">
                    <div class="services-item wow fadeInUp" data-wow-delay=".2s">
                        <div class="services-icon">
                            <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="{$vo.post_title}" />
                        </div>
                        <div class="services-content">
                            <h4 class="title">
                                <a href="portal/article/info.html?id={$vo.id}">{$vo.post_title}</a>
                            </h4>
                            <p>{$vo.post_excerpt}</p>
                            <div class="tag_box">
                                <foreach name="vo.keywords_list" item="item">
                                    <span>{$item}</span>
                                </foreach>
                            </div>
                        </div>
                    </div>
                </div> </a>

                </foreach>


            </div>
        </div>
    </section>
    <!-- 推荐平台 -->

    <!-- 团队老师 -->
    <section class="team-area">
        <div class="container teacher">
            <div class="cont_title">
                <h2>{:lang('TEACHER')}</h2>
            </div>
            <div class="row align-items-center">
                <div class="swiper">
                    <div class="swiper-wrapper">




                        <div class="row justify-content-center">
                            <foreach name="category2" item="item">
                            <foreach name="item" item="vo">
                            <div class="list"><a href="portal/article/teacher.html?id={$vo.id}">
                                <div class="services-item wow fadeInUp">
                                    <div class="services-icon">
                                        <img src="{:cmf_get_image_url($vo.thumbnail)}"
                                             class="img-responsive" alt="{$vo.post_title}"/>
                                    </div>
                                    <div class="services-content">
                                        <h4 class="title">
                                            <a href="portal/article/teacher.html?id={$vo.id}">{$vo.post_title}</a>
                                        </h4>
                                        <p>{$vo.post_excerpt}</p>
                                    </div>
                                </div>
                            </a>
                            </div>
                            </foreach>
                            </foreach>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 团队老师 -->

    <!-- 咨讯 -->
    <section class="team-area">
        <div class="container teacher consult">
            <div class="cont_title" style="margin-bottom: 5px;">
                <h2>{:lang('NEWS')}</h2>
            </div>
            <div class="row align-items-center">
                <div class="mt-tabpage-title">
                    <foreach name="category3" item="item" key="keys">
                        <if condition="$keys eq 0">

                            <a href="javascript:;" id="tab{$item.id}" data-id="{$item.id}"   class="mt-tabpage-item mt-tabpage-item-cur" >{$item.name} </a  >

                            <else/>

                            <a href="javascript:;" id="tab{$item.id}" data-id="{$item.id}"  class="mt-tabpage-item" >{$item.name} </a >
                        </if>

                    </foreach>
                </div>



                <foreach name="category4" item="item" key="key1">

                    <div class="news_cont" id="news_{$item.id}"  <if condition="$key1 neq 0"> style="display:none" </if> >

                        <div class="cont">

                            <foreach name="$item.portal_lists" item="vo" key="key2">

                                <a href="portal/article/index.html?id={$vo.id}">

                                    <div class="col-xl-12" <if condition="$key2 neq 0"> style="display:none" </if>>
                                        <div class="new_box">
                                            <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="{$vo.post_title}" />
                                            <h3><a href="portal/article/index.html?id={$vo.id}"> {$vo.post_title} </a></h3>
                                            <foreach name="vo.keywords_list" item="items">
                                                <div class="tag">{$items}</div>
                                            </foreach>
                                            <p>{$vo.post_excerpt}</p>
                                            <div class="time">
                                                <img src="__TMPL__/public/static/image/time.png" />
                                                <span>{:date('Y-m-d H:i',$vo.published_time)}</span>
                                            </div>
                                        </div>
                                    </div>

                                </a>
                            </foreach>

                            <div class="col-xl-12  <if condition="$key1 eq 1"> right_cont </if> ">
                                <foreach name="$item.portal_lists" item="vo" key="key2">
                                    <a href="portal/article/index.html?id={$vo.id}" >
                                        <div class="new_list" <if condition="$key2 eq 0"> style="display:none" </if>>
                                            <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="{$vo.post_title}"/>
                                            <div class="right_box">
                                                <div class="title">
                                                    <h3><a href="portal/article/index.html?id={$vo.id}">{$vo.post_title}</a></h3>
                                                </div>
                                                <p>{$vo.post_excerpt}</p>
                                                <foreach name="vo.keywords_list" item="items">
                                                    <div class="tag">{$items}</div>
                                                </foreach>
                                                <div class="time">
                                                    <img src="__TMPL__/public/static/image/time.png" />
                                                    <span>{:date('Y-m-d H:i',$vo.published_time)}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </foreach>
                            </div>
                        </div>
                    </div>
            </foreach>
        </div>
    </section>
    <!-- 咨讯 -->
</main>
<!-- main-area-end -->

<!-- 底部导航 -->
<div class="footer_box">

    <div class="foot_item active">
        <a href="#">
        <!-- <img src="__TMPL__/public/static/image/foot_icon1.png" /> -->
        <img src="__TMPL__/public/static/image/foot_icon1_active.png" />
        <h3>  {:lang('HOME')}</h3>
        </a>
    </div>


    <div class="foot_item">
        <a href="portal/agency/agency.html">
        <img src="__TMPL__/public/static/image/foot_icon2.png" />
        <!-- <img src="__TMPL__/public/static/image/foot_icon1_active.png" /> -->
        <h3>{:lang('Agency Center')}</h3>
        </a>
    </div>


    <div class="foot_item">
        <a href="{$site_info.site_center|default=''}">
        <img src="__TMPL__/public/static/image/foot_icon3.png" />
        <!-- <img src="__TMPL__/public/static/image/foot_icon1_active.png" /> -->
        <h3>{:lang('CONTACT US')}</h3>
        </a>
    </div>

</div>
<!-- 底部导航 -->

<!-- JS here -->
<include file="public@script_mobile" />

<script>
    //轮播图
    var mySwiper = new Swiper(".banner_box", {
        direction: "horizontal", // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: ".swiper-pagination",
        },
    });

    $(document).ready(function() {
        $('.mt-tabpage-item').click(function() {
            $('.mt-tabpage-item').removeClass('mt-tabpage-item-cur');
            $(this).addClass('mt-tabpage-item-cur');

            let id = $(this).attr('data-id')
            console.log(id)
            $('.news_cont').hide();
            $('#news_'+id).show();



        });
    });
    $(document).ready(function () {
        $("#tab1111").click(function () {
            $(this).addClass("mt-tabpage-item-cur");
            $("#tab2222").removeClass("mt-tabpage-item-cur");
        });
        $("#tab22222").click(function () {
            $(this).addClass("mt-tabpage-item-cur");
            $("#tab1111").removeClass("mt-tabpage-item-cur");
        });

        //隐藏遮罩
        // $("#fixed").click(function(){
        // $(this).hide();
        //});
        //显示遮罩
        // $("#menu").click(function(){
//$("#fixed").show();
        // });
    });
</script>
</body>
</html>
